<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
    #box{width: 630px;
    	 height: 1000px;
    	 border: 1px solid #f67;
    	 margin: 0 auto;

    }
    li{height: 130px;
    	width: 140px;
    	list-style: none;
       float: left;
       line-height: 130px;
       position: relative;
	   border: 0.5px solid red;
	   margin: 1px;
	   text-align: center;

    }
    a{
    	background:#ccc;
    }
    img{
    	position: absolute;
    	top: 0;
    	left: 0;
    	display: none;

    }

	</style>
	<script type="text/javascript">
		window.onload = function () {
	    var Oli = document.getElementsByTagName('li')
	    var Oimg = document.getElementsByTagName('img')
	    for (var i = 0; i < Oli.length; i++) {
	    	Oli[i].index = i;
	    	Oli[i].onmouseover = function(){
	    		Oimg[this.index].style.display = 'block'
	    }
	    Oli[i].onmouseout = function(){
	    		Oimg[this.index].style.display = 'none'
	    }
	    }
		}
	</script>
</head>
<body>
	<div id="box">
		<ul>
			<li>
				<a href="#">宝马</a>
				<img src="img/1.jpg" >
			</li>
			<li>
				<a href="#">大奔</a>
				<img src="img/2.jpg" >
			</li>
			<li>
				<a href="#">飞利浦</a>
				<img src="img/3.jpg">
				</li>
			<li>
				<a href="#">凯迪拉克</a>
				<img src="img/4.jpg">
			</li>
			<li>
				<a href="#">布加迪威龙</a>
				<img src="img/5.jpg">
			</li>
			<li>
				<a href="#">保时捷</a>
				<img src="img/6.jpg">
			</li>
			<li>
				<a href="#">三菱AE86</a>
				<img src="img/7.jpg">
			</li>
			<li>
				<a href="#">雪铁龙</a>
				<img src="img/9.jpg">
			</li>					

			</li>
		</ul>
	</div>
</body>
</html>